import React from 'react';
import { inject, observer } from 'mobx-react';
import { WeaRightMenu, WeaTable, WeaTop, WeaNewScroll } from 'ecCom';
import ReportShareOperation from "./ReportShareOperation";
import { renderAlertPage, getCurrentHeight } from '../../../util/Util'
import { Spin, Button } from 'antd';

/**
 * 绩效-考核结果分析共享设置
 */
@inject("reportShareStore")
@observer
export default class ReportShare extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      _height: getCurrentHeight(),
    };
    this.store = this.props.reportShareStore
  }

  //初始化表格数据
  componentWillMount() {
    this.store.doInit();
  }

  render() {
    const { hasRight, msg, data, selectedRowKeys, loading } = this.store;
    if (msg == "0" && !hasRight) return renderAlertPage("对不起，您暂时没有权限！")
    const menu = [{
      key: '1',
      icon: <i className="icon-coms-tianjia" />,
      content: '新建',
      onClick: () => this.store.initAddForm()
    }, {
      key: '2',
      icon: <i className="icon-coms-Delete" />,
      content: '删除',
      onClick: () => this.store.operationDel()
    }];
    const columns = [
      { title: '共享类型', dataIndex: 'sharetypename' },
      { title: '共享明细', dataIndex: 'showTypeContent' },
      { title: '共享级别', dataIndex: 'showLevelContent' },
    ];
    const { _height } = this.state;
    return (
      <Spin spinning={loading}>
        <div style={{ height: "100vh" }}>
          <WeaTop
            title="考核结果分析共享设置"
            icon={<i className='icon-coms-ModelingEngine-o' />}
            iconBgcolor='rgb(150, 53, 138)'
            showDropIcon={true}
            dropMenuDatas={menu}
            buttons={[
              (<Button type='primary' onClick={() => this.store.initAddForm()}>新建</Button>),
              (<Button type='primary' disabled={selectedRowKeys.length == 0} onClick={() => this.store.operationDel()}>删除</Button>)
            ]}
          />
          {msg == "1" &&
            <WeaRightMenu datas={menu} showUrlItem={false}>
              <div style={{ marginTop: "20px" }}>
                <WeaNewScroll height={'calc(100vh - 52px)'}>
                  <WeaTable
                    rowKey="id"
                    columns={columns}
                    dataSource={data}
                    pagination={false}
                    scroll={{ y: _height - 120 }}
                    rowSelection={{
                      selectedRowKeys,
                      onChange: this.onSelectChange,
                    }}
                  />
                </WeaNewScroll>
              </div>
              <ReportShareOperation />
            </WeaRightMenu>}
        </div>
      </Spin>
    )
  }

  //多选框值变化
  onSelectChange = (selectedRowKeys) => {
    this.store.selectedRowKeys = selectedRowKeys
  };

};